<template>
  <el-form label-width="80">
    <el-form-item label="SKU名称">
      <el-input
        placeholder="请你输入SKU名字"
        size="default"
        v-model="skuParams.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        type="number"
        placeholder="请你输入价格"
        v-model="skuParams.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input
        type="number"
        placeholder="请你输入重量"
        v-model="skuParams.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        type="textarea"
        placeholder="请你输入描述"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="70">
        <el-form-item :label="i.attrName" v-for="i in platfromAttr" :key="i.id">
          <!-- v-model 动态收集每一项option的value属性到大平台属性对象身上 -->
          <el-select v-model="i.platIdAndValueId">
            <!-- 收集大属性的id和小属性值的id -->
            <el-option
              :label="k.valueName"
              :value="`${i.id}:${k.id}`"
              v-for="k in i.attrValueList"
              :key="k.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item :label="i.saleAttrName" v-for="i in saleAttr" :key="i.id">
          <el-select v-model="i.saleIdAndValueId">
            <el-option
              :label="k.saleAttrValueName"
              :value="`${i.id}:${k.id}`"
              v-for="k in i.spuSaleAttrValueList"
              :key="k.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border :data="ImgAll" ref="table">
        <el-table-column width="80" type="selection"></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.imgUrl" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button v-if="row.default === 1" type="warning"
              >默认图片</el-button
            >
            <el-button v-else type="primary" @click="addDefault(row)"
              >设置默认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <!-- 底部按钮 -->
    <el-form-item>
      <el-button type="primary" size="default" @click="submit">保存</el-button>
      <el-button size="default" @click="cut">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
//引入请求
import {
  reqTrademarkAttrList,
  reqImgList,
  reqsaleArrList,
  reqAddSku,
} from "@/api/product/spu/index";
import { ElMessage } from "element-plus";
import { ref, nextTick } from "vue";

//存储平台属性
let platfromAttr = ref<any>([]);
//存储图片
let ImgAll = ref<any>([]);
//存储销售属性
let saleAttr = ref<any>([]);
//获取table的VC实例
let table = ref();
//talbe排它
let addDefault = (row: any) => {
  //排它
  ImgAll.value.forEach((item: any) => {
    item.default = 0;
    // 遍历每一个数据都取消选中
    table.value.toggleRowSelection(item, false);
  });
  row.default = 1;
  // 收集地址
  skuParams.value.skuDefaultImg = row.imgUrl;
  //切换高亮
  // 选中当前行  toggleRowSelection()
  // 参数1:要选中的元素,参数二是否选中
  table.value.toggleRowSelection(row, true);
};

//添加sku的请求参数
let skuParams = ref({
  //父组件传递过来的
  category3Id: "", //三级分类的ID
  spuId: "", //spu的ID
  tmId: "", //品牌的ID

  skuName: "", //sku的名字
  price: "", //价格
  weight: "", //重量
  skuDesc: "", //sku描述

  skuDefaultImg: "", //sku商品默认图片地址
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});

//定义方法父组件调用发请求
let addsku = async (c1Id: number | string, c2Id: number | string, spu: any) => {
  //清空数据
  Object.assign(skuParams.value, {
    //父组件传递过来的
    category3Id: "", //三级分类的ID
    spuId: "", //spu的ID
    tmId: "", //品牌的ID

    skuName: "", //sku的名字
    price: "", //价格
    weight: "", //重量
    skuDesc: "", //sku描述

    skuDefaultImg: "", //sku商品默认图片地址
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
  });
  platfromAttr.value = [];
  ImgAll.value = [];
  saleAttr.value = [];

  //发请求获取数据
  // 获取全部属性
  let result: any = await reqTrademarkAttrList(c1Id, c2Id, spu.category3Id);
  //获取图片
  let result1: any = await reqImgList(spu.id);
  //获取销售属性
  let result2: any = await reqsaleArrList(spu.id);

  //赋值
  platfromAttr.value = result;
  ImgAll.value = result1;
  saleAttr.value = result2;

  //收集请求参数
  skuParams.value.category3Id = spu.category3Id; //c3id
  skuParams.value.spuId = spu.id; //spuid
  skuParams.value.tmId = spu.tmId; //品牌id
 
  //图片
  if (ImgAll.value.length > 0) {
    // 排它
    ImgAll.value.forEach((item: any) => {
      item.default = 0;
    });
    ImgAll.value[0].default = 1;
  }
  // 存储图片地址
  skuParams.value.skuDefaultImg = ImgAll.value[0].imgUrl;
  // 选中当前行  toggleRowSelection()
  nextTick(() => {
    // 参数1:要选中的元素,参数二是否选中
    table.value.toggleRowSelection(ImgAll.value[0], true);
  });
};

//提交按钮
let submit = async () => {
  //准备参数
  //平台属性参数收集
  skuParams.value.skuAttrValueList = platfromAttr.value.reduce(
    (pre: any, cur: any) => {
      // 如果存在属性
      if (cur.platIdAndValueId) {
        let [attrId, valueId] = cur.platIdAndValueId.split(":");
        pre.push({ attrId, valueId });
      }
      return pre;
    },
    []
  );
  //销售属性参数收集
  skuParams.value.skuSaleAttrValueList = saleAttr.value.reduce(
    (pre: any, cur: any) => {
      // 如果存在属性
      if (cur.saleIdAndValueId) {
        let [saleAttrId, saleAttrValueId] = cur.saleIdAndValueId.split(":");
        pre.push({ saleAttrId, saleAttrValueId });
      }
      return pre;
    },
    []
  );
  //发请求
  try {
    await reqAddSku(skuParams.value);
    // 成功弹框
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    // 返回父组件
    $emit("changeSku", 0);
  } catch (error) {
    console.log(error)
    // 失败弹框
    ElMessage({
      message: "添加失败",
      type: "error",
    });
  }
};

//取消按钮的回调
let cut = () => {
  $emit("changeSku", 0);
};
//emit
let $emit = defineEmits(["changeSku"]);
//对外暴露方法
defineExpose({ addsku });
</script>

<style scoped>
</style>